import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:kq_flutter_core_widget/utils/kq_screen_util.dart';
import 'package:get/get.dart';
import 'package:kq_flutter_widgets/resources/kq_theme_colors.dart';
import 'package:kq_flutter_core_widget/utils/toast_util.dart';
import 'package:kq_flutter_widgets/widgets/button/kq_icon_button.dart';
import 'package:kq_flutter_core_widget/widgets/button/kq_ink_well.dart';
import 'package:kq_flutter_widgets/widgets/divider/kq_divider.dart';
import 'package:kq_flutter_widgets/widgets/dragView/kq_drag_list_view.dart';
import 'package:kq_flutter_widgets/widgets/formItem/entity/kq_form_entity.dart';
import 'package:kq_flutter_widgets/widgets/formItem/kq_edit_item_view.dart';
import 'package:kq_flutter_widgets/widgets/tabView/kq_tab_view.dart';
import 'package:kq_flutter_widgets/widgets/tabbar/kq_tab_bar.dart';
import 'package:kq_flutter_widgets/widgets/tabbar/kq_tab_bar_page_view.dart';
import 'package:kq_flutter_widgets/widgets/titleBar/kq_title_bar.dart';

import '../../resources/Images.dart';

/// 抽屉拖拽演示
///
/// 演示如何实现小诸葛首页设备详情效果
class DragDrawerDemo extends StatefulWidget {
  const DragDrawerDemo({Key? key}) : super(key: key);

  @override
  DragDrawerDemoState createState() => DragDrawerDemoState();
}

class DragDrawerDemoState extends State<DragDrawerDemo> {
  GlobalKey<ScaffoldState> globalKey = GlobalKey();

  EasyRefreshController controller = EasyRefreshController(
      controlFinishRefresh: true, controlFinishLoad: true);

  var tabs = [
    TabDataEntity('详情'),
    TabDataEntity('任务'),
    TabDataEntity('生产'),
    TabDataEntity('停机'),
    TabDataEntity('次品'),
    TabDataEntity('报工'),
    TabDataEntity('点检'),
    TabDataEntity('质检'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: KqHeadBar(
        headTitle: '1#',
        back: () {
          Get.back();
        },
        actions: [
          KqIconButton(
            icon: Icon(
              Icons.more_horiz,
              color: KqThemeColors.bgWhite,
            ),
            onPressed: () {},
          )
        ],
      ),
      body: Column(
        children: [
          SizedBox(
            height: 200,
          ),
          Expanded(
              child: KqTabBarPageView(
            tabs: tabs,
            onPageChanged: (index, entity) {
              print('$index');
            },
            tabScrollable: true,
            pageScrollable: false,
            indicatorType: IndicatorType.underline,
            controller: KqTabBarPageViewController(pageIndex: 0),
            customTabRightView: KqIconButton(
              icon: const Icon(Icons.more_horiz),
              size: 44.r,
              backgroundColor: KqThemeColors.bgWhite,
              onPressed: () {
                globalKey.currentState?.openEndDrawer();
              },
            ),
            drawerGlobalKey: globalKey,
            endDrawer: Drawer(
              width: 300.r,
              child: Column(
                children: [
                  Container(
                    padding: const EdgeInsets.all(8.0),
                    color: KqThemeColors.bgF7,
                    child: Row(
                      children: [
                        KqIconButton(
                          icon: Image.asset(Images.demoIcClose16Line),
                          size: 18.r,
                          onPressed: () {
                            globalKey.currentState?.closeEndDrawer();
                          },
                        ),
                        SizedBox(
                          width: 8.r,
                          height: 1,
                        ),
                        Text(
                          '导航排序',
                          style: TextStyle(
                              fontSize: 16.sp, color: KqThemeColors.text26),
                        )
                      ],
                    ),
                  ),
                  Expanded(
                      child: KqDragListView(
                    onReorder: (int oldIndex, int newIndex) {},
                    children: [
                      _listItem('详情'),
                      _listItem('任务'),
                      _listItem('生产'),
                      _listItem('停机'),
                      _listItem('次品'),
                      _listItem('报工'),
                      _listItem('点检'),
                      _listItem('质检'),
                    ],
                  )),
                  const KqTabView(
                    titles: ['重置', '保存'],
                    colorTypes: [ColorType.lineBlue, ColorType.fillBlue],
                  ),
                ],
              ),
            ),
            pages: tabs
                .map((e) => EasyRefresh(
                      controller: controller,
                      refreshOnStart: true,
                      onRefresh: () {
                        controller.finishRefresh();
                      },
                      child: ListView.builder(
                        itemCount: 10,
                        itemBuilder: (context, index) {
                          return ListTile(
                            title: Text('$index'),
                          );
                        },
                      ),
                    ))
                .toList(),
          ))
        ],
      ),
    );
  }

  _listItem(String text) {
    return Container(
      color: KqThemeColors.bgWhite,
      key: Key(text),
      height: 50.r,
      child: Column(
        children: [
          Expanded(
              child: Row(
            children: [
              SizedBox(
                width: 12.r,
                height: 1,
              ),
              Image.asset(
                Images.demoIcChoice16Nor,
                width: 20.r,
                height: 20.r,
              ),
              SizedBox(
                width: 6.r,
                height: 1,
              ),
              Expanded(
                  child: Text(
                text,
                style: TextStyle(fontSize: 14.sp, color: KqThemeColors.text59),
              )),
            ],
          )),
          const KqDivider()
        ],
      ),
    );
  }
}
